感謝https://javascript30.com/的免費教程

Demo：http://codepen.io/FutureFronterAndy/pen/VmByjZ
1
JavaScript Drum Kit
2
CSS + JS Clock
3
Playing with CSS Variables and JS
4
Array Cardio Day 1
5
Flex Panels Image Gallery
6
Ajax Type Ahead
7
Array Cardio Day 2
8
Fun with HTML5 Canvas
9
14 Must Know Dev Tools Tricks
10
Hold Shift to Check Multiple Checkboxes
11
Custom HTML5 Video Player
12
Key Sequence Detection (KONAMI CODE)
13
Slide In on Scroll
14
Object and Arrays - Reference VS Copy
15
LocalStorage and Event Delegation
16
CSS Text Shadow Mouse Move Effect
17
Sorting Band Names without articles
18
Tally String Times with Reduce
19
Unreal Webcam Fun
20
Native Speech Recognition
21
Geolocation based Speedometer and Compass
22
Follow Along Links
23
Speech Synthesis
24
Sticky Nav
25
Event Capture, Propagation, Bubbling and Once
26
Stripe Follow Along Dropdown
27
Click and Drag to Scroll
28
Video Speed Controller UI
29
Countdown Clock
30
Whack A Mole Game

學習點：

[javascript]

window.addEventListener('keydown',function(e) {
/* Act on the event */
const audio = document.querySelector(audio[data-key="${e.keyCode}"]);
const key = document.querySelector(.key[data-key="${e.keyCode}"]);

if(!audio)return;
audio.currentTime=0;
key.classList.add('playing');
audio.play();

});

[/javascript]

關於backtick "`"(ES6 only):http://eslint.org/docs/rules/quotes, http://stackoverflow.com/questions/27678052/what-is-the-usage-of-the-backtick-symbol-in-javascript

*幫助留住換行

[javascript]
function removeTransition(e){
if(e.propertyName!="transform")return;
this.classList.remove('playing');
}
const keys =document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend',removeTransition));

[/javascript]

關於transitionend：http://www.w3schools.com/jsref/event_transitionend.asp

*控制CSS Transition動畫，在動畫結束後觸發